<template>

借款名称
    <input type="text" v-model="Binfo.LoadName" />
   利息
   <select v-model="Binfo.IId">
                    <option value="">请选择</option>
                    <option v-for="item in Sinfo" :value="item.IId">{{item.IYear}}年{{item.IName}}%</option>
                 
                </select>

    <input type="button" value="搜索" @click="Show">

    <br>
    <br>

    <table border="1">
        <thead>
            <tr>
                <th>借款编号</th>
                <th>借款名称</th>
                <th>借款最高金额</th>
                <th>借款年限</th>
                <th>利息</th>
                <th>借款简介</th>
                <th>借款发布时间</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in info">
                <td>{{item.LoadId}}</td>
                <td>{{item.LoadName}}</td>
                <td>{{item.LoadMaxPrice}}</td>
                <td>{{item.LoadYear}}</td>
                <td>{{item.IYear}}年{{item.IName}}%</td>
                <td>{{item.LoadAb}}</td>
                <td>{{item.LoadDate.substring(0,10)}}</td>
                <!-- 插槽删除 -->
                 <td>
                    <slot name="del" :id="item.LoadId">删除</slot>
                 </td>
            </tr>
        </tbody>
    </table>
    <span>
        <!-- 分页 -->
      <a href="#" @click="Pages(1)">首页</a>
      <a href="#" @click="Pages(Pinfo.PageIndex-1)">上一页</a>
      <a href="#" @click="Pages(Pinfo.PageIndex+1)">下一页</a>
      <a href="#" @click="Pages(Pinfo.PageCount)">尾页</a>
         
    </span>
</template>


<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios';
import { useRoute } from 'vue-router';


const route = useRoute();
onMounted(()=>{
    Bang();
    Show()
  
})

const Binfo=ref({
    LoadName:'',
    IId:'',
})

const Sinfo=ref([
    {
        IId:"",
        IName:'',
        IYear:'',
    }
])

const info=ref([
    {
        LoadId:"",
        LoadName:'',
        LoadMaxPrice:'',
        LoadYear:'',
        IYear:'',
        IName:'',
        IId:'',
        LoadAb:'',
        LoadDate:'',
    }
    ])

const Pinfo=ref({
    PageIndex:1,
    PageSize:2,
    ListCount:0,
    PageCount:0,
})



const Bang=()=>{
    axios.get('http://localhost:2134/api/Loan/Bang')
    .then(res=>{
        Sinfo.value=res.data
    })
}

const Pages=(i:number)=>{
    if(i>0&&i<=Pinfo.value.PageCount){
    Pinfo.value.PageIndex=i;
        Show();
    }
    else if(i<=0){
        alert("已经是第一页了")
    }
    else if(i>Pinfo.value.PageCount){
        alert("已经是最后一页了")
        
    }
}


//显示

const Show=()=>{
    axios.get('http://localhost:2134/api/Loan/UserLoan',{
        params:{
            LoadName:Binfo.value.LoadName,
            IId:Binfo.value.IId,
            PageIndex:Pinfo.value.PageIndex,
            PageSize:Pinfo.value.PageSize,
           
        }
    })
    .then(res=>{
        console.log(res.data.table);
        info.value=res.data.table;
        Pinfo.value.ListCount=res.data.ListCount;
        Pinfo.value.PageCount=res.data.PageCount;
    })
}


</script>